<template>
  <!-- 发布资讯页面 -->
  <div>
    <el-form
      :model="articleForm"
      :rules="rules"
      ref="article_form"
      label-width="100px"
      class="demo-ruleForm"
      style="padding-top: 20px; margin-left: 30px; margin-bottom: 50px"
    >
      <!-- 发布的标题 -->
      <el-form-item label="标题" prop="title" style="width: 60%">
        <el-input v-model="articleForm.title"></el-input>
      </el-form-item>
      <!-- 风采的分类 -->
      <el-form-item label="分类" prop="categoryId">
        <el-select
          v-model="articleForm.categoryId"
          placeholder="请选择栏目分类"
        >
          <el-option
            v-for="data in articleCategoryData.filter((item) => !item.parentId)"
            :key="data.id"
            :label="data.name"
            :value="data.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 上传封面 -->
      <el-form-item
        label="封面"
        prop="cover"
        style="position: relative; left: 60%; bottom: 110px"
      >
        <el-upload
          class="avatar-uploader"
          :action="uploadFileURL"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="articleForm.cover" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span>文件大小不允许超过3M</span>
      </el-form-item>

      <!-- 风采内容编辑框 -->
      <el-form-item
        label="正文"
        prop="content"
        style="margin-top: -110px; width: 90%"
      >
        <tinymce v-model="articleForm.content" :height="240" />
      </el-form-item>

      <!-- 底部按钮 -->
      <el-form-item style="position: absolute; right: 10%; margin-top: -10px">
        <el-button @click="resetForm('article_form')">返回</el-button>
        <el-button type="primary" @click="submitForm('article_form')"
          >发布</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入Tinymce组件
import Tinymce from "@/components/Tinymce";
import { get, post } from "@/utils/request";
// 引入文件上传路径 和 文件预览的路径
import {showFileURL, uploadFileURL} from '@/utils/config'
export default {
  // 注册Tinymce组件
  components: { Tinymce },
  data() {
    return {
      // 上传文件的服务器地址
      uploadFileURL,
      // 发布文章的表单
      articleForm: {
        // 风采标题
        title: "",
        // 产品栏目名称
        categoryId: "",
        // 风采编辑的内容
        content: "",
        // 封面图片
        img: "",
      },
      // 图片预览路径
      imageUrl: "",

      // 产品栏目数据
      articleCategoryData: [],

      rules: {
        title: [{ required: true, message: "请输入风采标题", trigger: "blur" }],
        categoryId: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        content: [
          { required: true, message: "请填写风采内容", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  methods: {
    // 获取产品栏目的方法
    async queryCategoryData() {
      let res = await get("/category/findAll");
      this.articleCategoryData = res.data;
    },

    submitForm(formName) {
      this.$refs["article_form"].validate(async (valid) => {
        if (valid) {
          // 发送表单验证的请求 提交表单对象
          let res = await post("/article/saveOrUpdate", this.articleForm);
          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            this.$router.push({
              // 跳转的路由路径
              path: "/admin/info/article/List",
            });
          } else {
            this.$message.error(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs["article_form"].resetFields();
      this.$router.push({
        // 跳转的路由路径
        path: "/admin/info/article/List",
      });
    },

    // 图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // 上传成功之后 更新articleForm.cover的路径
      this.articleForm.cover = showFileURL + res.data.id
    },
    // 上传图片时的一些限制
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt3M = file.size / 1024 / 1024 < 3;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
      return isJPG && isLt3M;
    },
  },
  created() {
    // 自动获取文章栏目数据
    this.queryCategoryData();
  },
  mounted() {},
};
</script>
<style scoped>
.header {
  position: absolute;
}
</style>